<template>
	<view class="container">
		<view class="progress-view">
			<view class="sort-wrap">
				<text>{{currentIndex}}</text>/12
			</view>
			<progress stroke-width='3' :percent="progressPercent" activeColor="#FF770F" backgroundColor="#dfe0e0"/>
		</view>
		<!-- 展示区 -->
		<view class="chat-container" v-if="chatMessages.length > 0">
		    <scroll-view scroll-y scroll-with-animation style="height: 1100rpx;background-color: #ff00000;width: 100%;">
				<view class="chat-message" v-for="(item,index) in chatMessages" :key="index">
					<view class="chat-message-l">{{item.title}}</view>
					<view class="chat-message-r">
						<image class="image" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/a965e494-a2d2-4612-862f-ab77701eb3a8.png" @click="onRfresh(item)"></image>
						<text>{{item.text}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="footer-btn">
			<image class="footer-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/b1d75006-d4f8-4dc1-83de-1fb227c5e4e2.png" mode="widthFix" @click="onContinue" v-if="chatMessages.length < 12"></image>
			<image class="footer-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/e43cd19a-f306-40b6-9ccf-4f427a2fe77f.png" mode="widthFix" @click="toReport" v-else></image>
		</view v-else>
		<!-- 弹窗 -->
		<u-popup :show="visible" mode="bottom" @open="visible = true" @close="onClose" round="24">
			<view class="popup-content">
				<view class="clear" @click="handleClear">
					<image class="clean-up" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/7a8a391a-a6a7-4755-b054-4c069185120e.png" mode=""></image>
				</view>
				<view class="title">{{title}}</view>
				<view class="paging">
					<view class="paging-list">
						<view v-for="(item,index) in list" :key="index" class="paging-item" :class="{'active': index== num }" @click="toggleChoose(item,index)">
							{{item.desc}}
						</view>
					</view>
				</view>
				<view class="submit-btn" @click="onSubmit()">
					<image class="submit-bg" src="https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/e43cd19a-f306-40b6-9ccf-4f427a2fe77f.png" mode="widthFix"></image>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	//引入请求文件
	import {listing} from '../../api/api.js'
	import {corporeityQuiz,corporeityAi} from '../../api/request.js'
	export default{
		data(){
			return{
				currentIndex:1,
				progressPercent: 8.33,
				visible:true,
				list:[],
				chatMessages:[],
				num:null,
				dataList:[],
				code:'',
				title:'',
				index:0,
				isAdd:false,
				isRfresh: true,
			}
		},
		created() {
			this.getdata()
		},
		methods:{
			getdata(){
				listing(corporeityQuiz).then(res=>{
					if(res.data.code == 200){
						if(res.data?.data.length > 0){
							this.dataList = res.data?.data
							this.list = res.data?.data[0].itemList
							this.title = res.data?.data[0].title
						}
					}
				})
			},
			toggleChoose({code},index){
				this.code = code
				this.num = index
			},
			onClose(){
				this.visible = false
				if(this.isAdd == false){
					if(this.progressPercent != 8.33){
						this.progressPercent -= 100 / 12;
					}					
					if(this.currentIndex == 1){
						return
					}
					this.currentIndex--
				}
			},
			handleClear(){
				this.visible = false
				if(this.isAdd == false){
					if(this.progressPercent != 8.33){
						this.progressPercent -= 100 / 12;
					}					
					if(this.currentIndex == 1){
						return
					}
					this.currentIndex--
				}
			},
			onSubmit(){
				const index = this.dataList.findIndex(item => item.code === this.code);
				const message = {
					code:  this.dataList[index]?.code,
					title: this.dataList[index]?.title,
					text: this.dataList[index].itemList[this.num]?.desc,
					value: this.dataList[index].itemList[this.num]?.value
				 }
				this.chatMessages.push(message);
				this.isAdd = true
                this.chatMessages = this.arrayUnique(this.chatMessages,'code')
				this.visible = false
				if(this.isRfresh == true){
					this.index++
				}
			},
			onContinue(){
				this.isRfresh= true
				this.num = null
				this.isAdd = false
				this.list = this.dataList[this.index]?.itemList
				this.title = this.dataList[this.index]?.title
				if (this.progressPercent < 100) {
					if (this.currentIndex < 12){
						if(this.index == 0) this.currentIndex = 0
						this.currentIndex++;
					}
					if(this.index != 0) this.progressPercent += 100 / 12;
				}
				this.visible = true
			},
			onRfresh({code,value}){
				this.isRfresh= false
				this.num = value
				this.isAdd = false
				const index = this.dataList.findIndex(item => item.code === code);
				this.list = this.dataList[index]?.itemList
				this.title = this.dataList[index]?.title
				this.visible = true
			},
			//处理数组去重
            arrayUnique(arr, name) {
                let hash = {}
                return arr.reduce((acc, cru, index) => {
                    if (!hash[cru[name]]) {
                        hash[cru[name]] = {
                            index: acc.length
                        }
                        acc.push(cru)
                    } else {
                        acc.splice(hash[cru[name]]['index'], 1, cru)
                    }
                    return acc;
                }, [])
            },
			toReport(){
				let upDateArr = this.chatMessages.map(item=>{
					return{
						code: item.code,
						value: item.value
					}
				})
				let newArray = upDateArr.map(v => `${v.code}:${v.value}`);
				let strData = newArray.join(';')
				uni.showLoading({title:'提交中'})
				listing(corporeityAi+'?list='+strData).then(res=>{
					if(res.data.code == 200){
						uni.navigateTo({
							url:'../../packagesAiPhoto/aiPhoto/bReport?id='+res.data?.data
						})
						uni.hideLoading();
					}else{
						uni.hideLoading();
					}
				}).catch(err=>{
					uni.hideLoading();
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
		background: #F7F5F0;
		.progress-view{
			.sort-wrap{
				color: #140F08;
				font-size: 20rpx;
				text-align: right;
				text{
					color: #FF770F;
				}
			}
		}
		.chat-container{
			margin: 60rpx 0;
			.chat-message{
				font-size: 28rpx;
				font-weight: 400;
				margin-bottom: 56rpx;
				padding: 0 32rpx;
				box-sizing: border-box;
				&-l{
					width: 624rpx;
					color: #442B00;
					background: #fff;
					border-radius: 16rpx;
					padding: 20rpx;
					margin-bottom: 48rpx;
				}
				&-r{
					display: flex;
					justify-content: flex-end;
					.image{
						width: 200rpx;
						height: 56rpx;
						margin-right: 20rpx;
					}
					text{
						color: #fff;
						background: #FE6E2F;
						border-radius: 16rpx;
						padding: 24rpx 28rpx;
					}
				}
			}
		}
		.footer-btn{
			position: fixed;
			bottom: 78rpx;
			left: 50%;
			transform: translateX(-50%);
			.footer-bg{
				height: 96rpx;
			}
		}
		.popup-content{
			position: relative;
			background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/9/a45c1860-d9a8-40ea-8856-757209f0ef61.png');
			background-repeat: no-repeat;
			background-size: cover;
			padding-bottom: 100rpx;
			padding: 0 64rpx;
			box-sizing: border-box;
			.clear{
				position: absolute;
				top: 24rpx;
				right: 24rpx;
				.clean-up{
					width: 48rpx;
					height: 48rpx;
				}
			}
			.title{
				color: #140F08;
				font-weight: bold;
				font-size: 32rpx;
				margin-top: 74rpx;
				line-height: 44rpx;
				margin-bottom: 40rpx;
			}
			.paging{
				&-list{
					.paging-item{
						width: 620rpx;
						height: 96rpx;
						background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/f3c0f11c-dc53-4656-beb9-ba251b9401ce.png');
						background-repeat: no-repeat;
						background-size: cover;
						background-position: center;
						display: flex;
						align-items: center;
						justify-content: center;
						color: 5e4111;
						font-size: 28rpx;
						margin-bottom: 32rpx;
						font-weight: 400;
						&:last-child{
							margin-bottom: 0;
						}
					}
					.active{
						background-image: url('https://jht-public.oss-cn-shenzhen.aliyuncs.com/2024/8/fb29d1bb-930b-45df-b10c-b1b54e794057.png');
					}
				}
			}
			.submit-btn{
				margin:48rpx 0 64rpx;
				.submit-bg{
					height: 96rpx;
				}
			}
		}
		
	}
</style>